<template>
	<view class="register">
		<view class="inputWrap bgw pd30">
			<view class="input">
				<view class="inputLeft" @click="myVisit()">
					<view class="title">就诊人</view>
					<view class="pcs" v-if="!jzeList.id">点击选择就诊人</view>
					<view class="pickerInput" v-else>{{jzeList.name}}</view>
				</view>
			</view>
		</view>

		<view class="inputWrap bgw pd30">
			<view class="uniFlex2">
				<view class="title">病情描述</view>
				<textarea type="text" v-model="message" placeholder="请输入病情描述" placeholder-class="pcs2"></textarea>
			</view>
		</view>
		<view class="imgWrap bgw">
			<view class="title">请提供病情相关的图片（{{tempFilePaths.length}}/8）</view>
			<view class="img">
				<view v-for="(item, i) in tempFilePaths" :key="i" style="position: relative;">
					<img :class="[(i+1)%4 === 0 ?'noMargin':'']" :src="baseUrl+item" @click="previewImage(i)" mode="">
					</img>
					<img :class="[(i+1)%4 === 0 ?'noMargindel':'']" class="del" src="../../static/bg/delImg.png"
						mode="" @click="delImg(i)"></img>
				</view>
				<view class="upload" @click="upload"></view>
			</view>
		</view>
		
		<view class="inputWrap bgw pd30">
			<view class="input">
				<view class="inputLeft">
					<view class="title">问诊单类型</view>
					<picker @change="bindPickerChange" :value="index" :range="array">
						<view class="pcs" v-if="index === -1">请选择类型</view>
						<view class="pickerInput" v-else>{{array[index]}}</view>
					</picker>
				</view>
			</view>
			<view class="input" v-if="type" @click="choose">
				<view class="inputLeft">
					<view class="title">填写问诊单</view>
					<view class="pcs" v-if="typeDatas.length == 0">点击填写问诊单</view>
					<view class="pickerInput" v-else>已填写</view>
				</view>
			</view>
		</view>

		<view class="btnStyle" @click="submit">立即提交</view>
	</view>
</template>

<script>
	import {
		wzd,guahao
	} from '@/request/api.js'
	export default {
		data() {
			return {
				baseUrl:'',
				id: '', //医生id
				jzeList: {
					id: '',
					name: '',
					jwbs: '',
					age: '',
					gms: ''
				},
				message: '',
				tempFilePaths: [
					// {url: '../../static/bg/1.jpg'},
					// {url: '../../static/bg/1.jpg'},
					// {url: '../../static/bg/1.jpg'},
					// {url: '../../static/bg/1.jpg'},
				],
				array: ['女士','男士','儿童'],
				index: -1,
				type: '',
				typeList:[],
				typeDatas:[]
			}
		},
		onLoad(options) {
			this.baseUrl = getApp().globalData.baseUrlImg
			this.id = options.id
		},
		methods: {
			// 选择就诊人
			myVisit() {
				uni.navigateTo({
					url: '/pages/myVisit/myVisit'
				})
			},
			// 上传
			upload() {
				var that = this
				uni.chooseImage({
					count: 8, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: function(res) {
						let list = []
						let count = 0;
						let files = res.tempFilePaths
						uni.showLoading();
						files.forEach((item) => {
							uni.uploadFile({
								url: getApp().globalData.baseUrl + '/Pub/uploadImg',
								filePath: item,
								name: 'file',
								header: {
									// 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
									'authoriztion': wx.getStorageSync('token')
								},
								success: uploadFileRes => {
									let ret = JSON.parse(uploadFileRes.data);
									count++;
									//如果是最后一张,则隐藏等待中  
									if (count == files.length) {
										wx.hideLoading();
									}
									if (ret.code == '200') {
										let img = ret.data[0]
										list.push(img) //待上传图片临时路径
										that.tempFilePaths = list
									} else {
										wx.showToast({
											title: ret.msg,
											icon: "none",
											duration: 1500
										})
									}
								},
								fail: err => {
									uni.hideLoading();
									uni.showToast({
										title: '上传失败,请重新上传!',
										icon: 'none'
									});
								}
							});
						})
					}
				});
			},
			// 删除
			delImg(i) {
				this.tempFilePaths.splice(i, 1);
			},
			// 预览
			previewImage: function(index) {
				//uniapp预览轮播图
				let imgs = []
				for(let i=0;i<this.tempFilePaths.length;i++){
					let str = this.baseUrl + this.tempFilePaths[i]
					imgs.push(str)
				}
				uni.previewImage({
					current: index, //预览图片的下标
					urls: imgs //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			},
			// 问诊单类型
			bindPickerChange(e) {
				if(this.index === e.target.value){
					return;
				}	
				this.index = e.target.value;
				this.type = Number(e.target.value)+1;
				uni.showLoading()
				wzd({type:this.type}).then(res => {
					uni.setStorageSync('typeList','')
					this.typeList = res.data.items;
					this.typeDatas = [];
					uni.hideLoading()
				})
			},
			// 就诊单选择
			choose(){
				uni.navigateTo({
					url:'./choose?items='+JSON.stringify(this.typeList)
				})
			},
			// 提交
			submit() {
				if (!this.jzeList.id) {
					uni.showToast({
						title: '请选择就诊人',
						icon: "none"
					})
					return
				}
				if (!this.message) {
					uni.showToast({
						title: '请输入病情描述',
						icon: "none"
					})
					return
				}
				if (!this.type) {
					uni.showToast({
						title: '请选择问诊单类型',
						icon: "none"
					})
					return
				}
				if (this.typeDatas.length == 0) {
					uni.showToast({
						title: '请填写问诊单',
						icon: "none"
					})
					return
				}
				let images = ''
				if (this.tempFilePaths.length != 0) {
					images = this.tempFilePaths.toString()
				}
				let typeList = uni.getStorageSync('typeList')
				let param = {
					company_id:uni.getStorageSync('companyId'),
					did: this.id,
					uid: this.jzeList.id,
					jwbs: this.jzeList.jwbs,
					gms: this.jzeList.gms,
					miaoshu: this.message,
					images: images,
					wzdtype: this.type,
					datas1: JSON.stringify(this.typeDatas),
					data3: JSON.stringify(typeList)
				}
				guahao(param).then(res => {
					uni.showToast({
						title:'挂号成功！',
						icon:'none'
					})
					setTimeout(function(){
						uni.navigateBack({
							delta: 1
						})
					},800)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #f8f8f8;
	}

	.register {
		padding-bottom: 50upx;
		.inputWrap {
			margin-bottom: 30upx;

			.input {
				height: 96upx;
				border-bottom: 1px solid #E5E5E5;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.inputLeft {
					display: flex;
					align-items: center;

					.title {
						width: 140upx;
						font-size: 30upx;
						font-family: Source Han Sans CN;
						font-weight: bold;
						line-height: 40px;
						color: #414141;
						margin-right: 40upx;
						white-space: nowrap;
					}

					.pickerInput {
						font-size: 28upx;
						line-height: 96upx;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
						width: 500upx;
					}
				}
			}

			.input:last-of-type {
				border: none;
			}
		}

		.imgWrap {
			margin-bottom: 30upx;
			padding: 40upx 30upx;

			.title {
				font-size: 30upx;
				font-weight: bold;
				color: #333333;
				margin-bottom: 52upx;
			}

			.img {
				display: flex;
				flex-wrap: wrap;

				.del {
					width: 40upx;
					height: 40upx;
					position: absolute;
					top: -20upx;
					right: -20upx;
				}
			}

			img {
				width: 152upx;
				height: 152upx;
				margin-bottom: 20upx;
				margin-right: 26upx;
			}

			.noMargin {
				margin-right: 0upx;
			}

			.noMargindel {
				top: -20upx !important;
				right: -44upx !important;
			}

			.upload {
				width: 152upx;
				height: 152upx;
				background: url(../../static/bg/upload2.png) no-repeat;
				background-size: 100% 100%;
				margin-bottom: 20upx;
			}
		}

		.uniFlex2 {
			.title {
				line-height: 40px;
				width: 140upx;
				font-size: 30upx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #414141;
				margin-right: 40upx;
			}

			textarea {
				flex: 1;
				padding: 20upx 0;
			}
		}
		.btnStyle{
			margin-top: 120upx;
		}
	}
</style>
